<template>
	<view class="box pdb-25">
		<myNav :height="65" :title="title" />
		<view class="step_box flex-ac flex-sb mgt-30 pdl-38 pdr-40">
			<view class="flex-col flex-ac step_container" v-for="item in stepList" :key="item">
				<view class="flex-jc-ac fs20"
					:class="item.num <= currentNum && item.num !== stepList.length ? 'active_num step_num ' : currentNum=== stepList.length ? 'last active_num step_num':item.num == stepList.length ?'last step_num':'step_num'">
					{{item.num}}
				</view>
				<text class="mgt-19 fs22"
					:class="item.num <= currentNum ? 'active_name ' : 'step_name'">{{item.name}}</text>
			</view>
		</view>
		<view class="container mgt-61">
			<!-- 第一步 -->
			<step1 v-if="currentNum===1" :current-num="1" @handleCurrent="handleCurrent"/>
			<!-- 第二步 -->
			<step2 v-if="currentNum===2" :current-num="2" @handleCurrent="handleCurrent" />
			<!-- 第三步 -->
			<step3 v-if="currentNum===3" :current-num="3" @handleCurrent="handleCurrent" />
			<!-- 第四步 -->
			<step4 v-if="currentNum===4" :current-num="4" @handleCurrent="handleCurrent" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';

	import { useInformation } from '@/store/modules/index.ts'

	import { onShow } from '@dcloudio/uni-app'

	import myNav from "../../components/myNav.vue"

	import step1 from "./components/step_1.vue"
	import step2 from "./components/step_2.vue"
	import step3 from "./components/step_3.vue"
	import step4 from "./components/step_4.vue"

	import type { stepItem, precautionsItem, informationItem, informationRules } from "../../static/src/types/step"
	const user = useInformation()

	const title = ref<string>("实名认证")
	const stepList = ref<stepItem[]>([
		{
			num: 1,
			name: '身份认证'
		},
		{
			num: 2,
			name: '基本信息填写'
		},
		{
			num: 3,
			name: '人脸识别'
		},
		{
			num: 4,
			name: '完成待审核'
		}
	])

	const currentNum = ref<number>(1);
	
	const handleCurrent = (num : number) => {
		currentNum.value = num
		console.log(currentNum.value, 'currentNum.value')
		user.setStep(currentNum.value)
	}

	const handleBack = (num : number) => {
		currentNum.value = num
		user.setStep(currentNum.value)
	}
	
	onShow(() => {
		if (user.currentStep) {
			currentNum.value = user.currentStep
		}
	})
</script>

<style lang="scss" scoped>
	@import '@/style/style.scss';

	.box {
		height: 100%;
		min-height: 100vh;

		.step_box {
			.step_container {
				.step_num {
					position: relative;
					width: 38rpx;
					height: 38rpx;
					color: #FEFEFE;
					background: #CACEE0;
					border-radius: 50%;
					font-weight: bold;
					font-family: PingFang SC;

					&::after {
						content: '';
						position: absolute;
						left: 60rpx;
						width: 100rpx;
						height: 2rpx;
						background: #B8BCCC;
						z-index: 1;
					}
					
					&.last {
						&::after {
							display: none;
						}
					}
				}

				.active_num {
					color: #ffffff;
					background: #3C51F2;
					border-radius: 50%;
					box-shadow: 0 0 10rpx rgba(60, 81, 242, 0.5);

					@extend.step_num;

					&::after {
						background: #3C51F2;
					}
				}

				.active_name {
					color: #3C51F2;
					font-weight: 500;
					font-family: PingFang SC;
				}

				.step_name {
					color: #878999;
					font-weight: 500;
					font-family: PingFang SC;
				}
			}
		}
	}
</style>